import axios from 'axios'
import { reactive, toRefs } from 'vue'

interface IResult<T> {
	result: T | null
	loading: boolean
	err: any
}

const useURLLoader = <T = any>(url: string) => {
	const data = reactive<IResult<T>>({
		result: null,
		loading: true,
		err: null
	})

	axios
		.get(url)
		.then((rawData) => {
			data.result = rawData.data
		})
		.catch((e) => {
			data.err = e
		})
		.finally(() => {
			data.loading = false
		})

	return toRefs(data)
}

export default useURLLoader

// 'https://dog.ceo/api/breeds/image/random'
// https://jsonplaceholder.typicode.com/todos/1
